<template>
  <div height="100%">
    <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
      <x-header
        title="安全隐患"
        :left-options="{backText:'',preventGoBack:'true'}"
        @on-click-back="toMap"
      >
        <div slot="right" @click="showSelect = true">
          <img
            src="@/assets/img/select_danger.png"
            style="width: 30px;height: 30px;"
          />
        </div>
      </x-header>
      <div v-transfer-dom>
        <actionsheet :menus="menus" v-model="showSelect" @on-click-menu="selectByRectifyState"></actionsheet>
      </div>
      <div v-if="dangerList.length > 0" class="forList">
        <div
          v-for="(item,index) in dangerList"
          :key="index"
          style="display:flex"
          @click="openInfo(item)"
        >
          <div v-if="item.RECTIFYSTATE == '未整改'" v-show="unrectifyed" class="danger_item">
            <div class="danger_img">
              <photo-upload
                title
                :pageToken="pageToken"
                :fieldToken="fieldToken"
                :imgWidth="imgWidth"
                v-model="item.IMAGE"
                :readonly="true"
                :showOne="true"
              ></photo-upload>
            </div>
            <div class="danger_text">
              <div class="description">{{item.DESCRIPTION}}</div>
              <div class="state_time">
                <div style="background-color:#FFF7E7;color:#FFAD14">{{item.RECTIFYSTATE}}</div>
                <div class="datetime">{{item.INPUTMONTH.substring(0,10)}}</div>
              </div>
            </div>
          </div>
          <div v-else-if="item.RECTIFYSTATE == '已整改'" v-show="rectifyed" class="danger_item">
            <div class="danger_img">
              <photo-upload
                title
                :pageToken="pageToken"
                :fieldToken="fieldToken"
                :imgWidth="imgWidth"
                v-model="item.IMAGE"
                :readonly="true"
                :showOne="true"
              ></photo-upload>
            </div>
            <div class="danger_text">
              <div class="description">{{item.DESCRIPTION}}</div>
              <div class="state_time">
                <div style="background-color:#E9F7F2;color:#24B383">{{item.RECTIFYSTATE}}</div>
                <div class="datetime">{{item.INPUTMONTH.substring(0,10)}}</div>
              </div>
            </div>
          </div>
          <div v-else v-show="notPassed" class="danger_item">
            <div class="danger_img">
              <photo-upload
                title
                :pageToken="pageToken"
                :fieldToken="fieldToken"
                :imgWidth="imgWidth"
                v-model="item.IMAGE"
                :readonly="true"
                :showOne="true"
              ></photo-upload>
            </div>
            <div class="danger_text">
              <div class="description">{{item.DESCRIPTION}}</div>
              <div class="state_time">
                <div style="background-color:#fcecec;color:#e64040">{{item.RECTIFYSTATE}}</div>
                <div class="datetime">{{item.INPUTMONTH.substring(0,10)}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="forSwipeRight"></div>

      <div v-if="havenList.length > 0" class="forList">
        <div
          v-for="(item,index) in havenList"
          :key="index"
          style="display:flex"
          @click="openInfo(item)"
        >
          <div v-show="unrectifyed" class="danger_item">
            <div class="danger_img">
              <photo-upload
                title
                :pageToken="pageToken"
                :fieldToken="fieldToken"
                :imgWidth="imgWidth"
                v-model="item.ATTACHMENTS"
                :readonly="true"
                :showOne="true"
              ></photo-upload>
            </div>
            <div class="danger_text">
              <div class="description">{{item.DESCRIPTION}}</div>
              <div class="state_time">
                <div style="background-color:#FFF7E7;color:#FFAD14">未整改</div>
                <div class="datetime">{{item.INPUTDATE.substring(0,10)}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="forSwipeRight"></div>
    </v-touch>
  </div>
</template>

<script>
import { Actionsheet, TransferDom } from "vux";
export default {
  name: "dangerList",
  directives: {
    TransferDom
  },
  components: {
    Actionsheet
  },
  mounted() {
    this.isPrjManag = this.$route.params.isPrjManag;
    this.projectId = this.$route.params.projectId;
    this.queryInfo();
    this.pageToken = this.guid();
    this.fieldToken = this.guid();
  },
  data() {
    return {
      isPrjManag: "",
      projectId: "",
      showSelect: false,
      menus: {
        menu1: "全部",
        menu2: "已整改",
        menu3: "未整改",
        menu4: "整改不合格"
      },
      pageToken: "",
      fieldToken: "",
      dangerList: [],
      havenList: [], //未拉取的数据
      imgWidth: "100%",
      rectifyed: true,
      unrectifyed: true,
      notPassed: true
    };
  },
  methods: {
    onSwipeRight() {
      this.$router.push({
        path: "/map",
        name: "map"
      });
    },
    toMap() {
      //console.log("ququququ")
      this.$router.push({
        path: "/map",
        name: "map"
      });
    },
    queryInfo() {
      this.$ajax({
        url: this.COMMON_URL,
        data: {
          _method: "HOME_FIX_PERMISSION_MENU.getRectifyDetail",
          sysprjid: this.projectId,
          isPrjManag: this.isPrjManag
        },
        async: false,
        method: "post"
        // success : function(response){
        // 	console.log(response);
        // 	data = response.data;
        // }
      }).then(res => {
        console.log(res);
        this.dangerList = res.data.data;
      });
      //未拉取的检查单
      this.$ajax({
        url: this.COMMON_URL,
        data: {
          _method: "HOME_FIX_PERMISSION_MENU.getHaventLDangerData",
          sysprjid: this.projectId
        },
        async: false,
        method: "post"
      }).then(res => {
        console.log("未拉取", res);
        this.havenList = res.data.data1;
      });
    },
    selectByRectifyState(menuKey, menuItem) {
      if (menuItem == "已整改") {
        this.rectifyed = true;
        this.unrectifyed = false;
        this.notPassed = false;
      } else if (menuItem == "未整改") {
        this.rectifyed = false;
        this.unrectifyed = true;
        this.notPassed = false;
      } else if (menuItem == "整改不合格") {
        this.unrectifyed = false;
        this.rectifyed = false;
        this.notPassed = true;
      } else {
        this.notPassed = true;
        this.unrectifyed = true;
        this.rectifyed = true;
      }
    },
    openInfo(item) {
      this.$router.push({
        path: "/dangerDetail",
        name: "dangerDetail",
        params: {
          item: item,
          isPrjManag: this.isPrjManag,
          projectId: this.projectId
        }
      });
    }
  }
};
</script>

<style scoped>
.forList{
   width: 100%;
  height: -webkit-fit-content;
}
.forSwipeRight {
  width: 100%;
  height: -webkit-fill-available;
}
.description {
  color: #333333;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  line-height: 24px;
}
.datetime {
  font-size: 13px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  margin-left: auto;
}
.danger_item {
  display: flex;
  width: 100%;
}
.danger_img {
  width: 150px;
}
.danger_text {
  width: calc(100% - 150px);
  padding: 10px 10px;
}
.state_time {
  display: flex;
  margin-top: 5%;
}
/* .transition-view /deep/ .vux-header .vux-header-title {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #262A34;
  font-family:PingFangSC-Semibold;
} */
</style>
